<template>
    <div class="role">
        <el-button size="medium" type="primary" plain @click="add">
            新增
        </el-button>
        <div class="role-table">
            <el-table :data="tableData" border style="width: 100%" height="100%">
                <el-table-column prop="productType" label="产品类型"> </el-table-column>
                <el-table-column prop="relevance" label="相关配件">
                    <template slot-scope="scope">
                        <span v-if="typeof scope.row.relevance == 'string'">{{ scope.row.relevance == 'ALL' ? '全部允许' :
                            '全不允许' }}</span>
                        <div v-else class="text">
                            <span v-for="text in scope.row.relevance">{{ tableData.find(item => item.id ==
                                text).productType }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="update(scope.row)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button size="small" type="text" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="50%" :show-close="false" :title="dialogTitle">
            <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="产品类型" prop="productType">
                    <el-input placeholder="请输入计量单位" v-model="dialogForm.productType"></el-input>
                </el-form-item>
                <el-form-item label="相关配件" prop="productType">
                    <el-select v-model="dialogForm.relevance" multiple placeholder="请选择" style="width: 100%;"
                        @change="selectChange" :default-value="[1, 4]">
                        <el-option :label="'全部允许'" :value="'ALL'"></el-option>
                        <el-option :label="'全不允许'" :value="'VOID'"></el-option>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitBtnDialog('dialogForm')" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="removeDialog" width="50%" :show-close="false" title="删除">
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="removeBtnDialog('dialogForm')" v-debounce>
                    确 定
                </el-button>
                <el-button @click="cancleBtn">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import productType from '../../api/productType';

export default {
    data() {
        return {
            tableData: new Array(),
            dialogVisible: false,
            removeDialog: false,
            dialogTitle: "",
            dialogForm: {
                id: void 0,
                productType: void 0,
                relevance: new Array()
            },
            rules: {
                name: [
                    { required: true, message: "请输入计量单位", trigger: "blur" }
                ],
            },
            options: new Array()
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        getTableData() {
            this.$axios.get("/productType/getProductType").then(res => {
                res.data.map(item => {
                    item.relevance = (item.relevance == "ALL" || item.relevance == "VOID") ? item.relevance : item.relevance.split(",")
                })
                this.tableData = res.data
                this.options = this.tableData.map(item => new Object({ value: item.id, label: item.productType }))
            });
        },
        add() {
            this.dialogVisible = true
            this.dialogTitle = "添加"
        },
        update(value) {
            this.dialogVisible = true
            this.dialogTitle = "修改"
            this.dialogForm.id = value.id
            this.dialogForm.productType = value.productType
            this.$nextTick(() => this.dialogForm.relevance = Array.isArray(value.relevance) ? value.relevance.map(Number) : [value.relevance])
        },
        remove(value) {
            this.removeDialog = true
            this.dialogForm.id = value.id
            this.dialogForm.productType = value.productType
        },
        submitBtnDialog() {
            const data = {
                ...this.dialogForm,
                relevance: this.dialogForm.relevance.join(',')
            }
            if (this.dialogTitle == "添加") {
                productType.addProductType(data).then(res => {
                    this.cancleBtn()
                    this.$message(res.message)
                    this.getTableData()
                })
            } else if (this.dialogTitle == "修改") {
                productType.updateProductType(data).then(res => {
                    this.cancleBtn()
                    this.$message(res.message)
                    this.getTableData()
                })
            } else {
                console.log("异常")
            }
        },
        cancleBtn() {
            this.dialogForm.id = void 0
            this.dialogForm.productType = void 0
            this.dialogForm.relevance = new Array()
            this.dialogVisible = false
            this.removeDialog = false
        },
        removeBtnDialog() {
            const data = {
                id: this.dialogForm.id
            }
            productType.deleteProductType(data).then(res => {
                this.cancleBtn()
                this.$message(res.message)
                this.getTableData()
            })
        },
        selectChange(value) {
            if (value.at(-1) == 'ALL' || value.at(-1) == 'VOID') {
                this.dialogForm.relevance = Array.of(value.at(-1))
            } else if (value[0] == 'ALL' || value[0] == 'VOID') {
                value.shift()
            }
        }
    }
}
</script>

<style scoped>
.role {
    height: 100%;
}

.role-table {
    height: 94%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-top: 10px;
}

.text span:nth-child(n+2)::before {
    content: ' | ';
}
</style>